<template>
    <div id="background">
        <el-container>
            <el-header id="xiTongXiaoXiHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col  :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize" >系统消息</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main id="xiTongXiaoXiMain">
                <div v-for="xiaoXi in xiaoXis" v-bind:key="xiaoXi.url" style="margin-top:10px">
                    <el-row type="flex" class="imgCol">
                        <span class="words" style="font-size:14px">{{xiaoXi.datetime}}</span>
                    </el-row>
                    <el-card class="xiaoXiCard" >
                        <div  @click="goToXiaoXiDetail(xiaoXi.url,xiaoXi.title)">
                            <span >{{xiaoXi.title}}</span>
                        </div>
                        <div style="margin-top:5px;height:80px"   @click="goToXiaoXiDetail(xiaoXi.url,xiaoXi.title)">
                            <span class="words" style="font-size:14px">{{xiaoXi.text}}</span>
                        </div>
                        <div   @click="goToXiaoXiDetail(xiaoXi.url,xiaoXi.title)">
                            <div class="dashLine"></div>
                            <el-row type="flex">
                                <el-col :xs="15" :sm="15" :md="15">
                                    <span class="words">查看详情</span>
                                </el-col>
                                <el-col :xs="1" :sm="1" :md="1" :offset="8">
                                   <span class="words">></span>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div v-show="more" class="imgCol">
                        <span class="words" style="font-size:14px">没有更多了...</span>
                </div>
                <div style="height:5px"></div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
export default {
    data(){
        return{
            more:false,
            //绑定页码
            pageInfo:{
                pageNo:1,
                pageSize:5,
                total:0,
            },
            backIcon:backIcon,
            //
            xiaoXis:[]
        }
    },
    mounted(){
        this.pageInfo.pageNo=1;
        this.pageInfo.pageSize=5;
        this.getXiaoXiGaiLan(this.pageInfo.pageNo,this.pageInfo.pageSize);

        var normalHeight=document.documentElement.clientHeight;

    //     var bg = document.getElementById("background");
    //    // normalHeight=document.documentElement.clientHeight;
    //     console.log("height:"+normalHeight);
    //     bg.style.height = normalHeight+"px";
    //     bg.style.backgroundColor = "#FFFFFF"
    //     bg.style.margin = "0px";

        var head=document.getElementById("xiTongXiaoXiHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        // var main=document.getElementById("xiTongXiaoXiMain");
        // var headHeight=normalHeight/30 *26 ;
        // console.log("mainHeight:"+headHeight);
        // main.style.height=headHeight+"px";

        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goToXiaoXiDetail(url,title){
            
            this.$router.push({
                path:'/xiaoXi/detail',
                query:{
                    url:url,
                    title:title
                }
            })
        },
        //分页获取系统消息概览
        getXiaoXiGaiLan(no,size){
            var URL=this.IP.IP+'/message/systemMessages';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    pageNo:no,
                    pageSize:size
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    var i=0;
                    for(i=0;i<response.data.data.info.length;i++){
                        this.xiaoXis.push(response.data.data.info[i])
                    }
                   this.pageInfo.total=response.data.data.total;
                }else{
                    // Toast(response.data.msg);
                    this.more=true;
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        handleScroll(){
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //   console.log("scrollTop:"+scrollTop);
        //   console.log("scrollHeight:"+scrollHeight);
        //   console.log("windowHeight:"+windowHeight);
            if(scrollTop+windowHeight===scrollHeight){
                if(this.more==false){
                       setTimeout(()=>{
                        this.pageInfo.pageNo++;
                        this.getXiaoXiGaiLan(this.pageInfo.pageNo,this.pageInfo.pageSize);
                    },500);
                    
                }
            }
                 
      }
    } 
}
</script>
<style>
.dashLine{
    width:100%;
    border-top:1px dashed #707070;
    height: 1px;
}
.xiaoXiCard{
    margin:5px 20px 20px 20px;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.words{
    color:#707070;
}
.el-main {
    padding: 0px ;
}
.el-header{
  padding:0px;
}
.el-footer {
    padding:0px;
}
#xiTongXiaoXiHead{
    background-color: #53cdf5;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
